/**
 * Created by Administrator on 2017/7/27.
 */
require(["config"],function() {
  require(["jquery", "swiper", "com","jsonp"], function ($) {
    $(function () {
    /*---------------------side_right(侧边栏购物车)------------------------*/
    $(".cart").click(function(){
      $(".side_right").animate({right:"0px"},1000,function() {
        $(".my_cart").animate({right: "0px"}, 1000);
        $(".close").click(function(){
          $(".side_right").animate({right:"-276px"},500);
        })
      })
    })
    /*---------------------side_right(右下角鼠标划入事件)------------------*/
    $(".cart").hover(function(){
      $(this).css({background:"#3fa600"})
      $(this).find("span").css({backgroundPosition:"-178px -42px"})
      $(this).find("em").css({background:"black"})
    },function(){
      $(this).css({background:"black"})
      $(this).find("em").css({background:"green"})
      $(this).find("span").css({backgroundPosition:"-178px -8px"})
    })
    $(".cart-nav>ul>li").mouseover(function(){
     /* $(this).css({background:"#3fa600"})*/
      $(this).find("span").css({display:"block"})
      .end().siblings().find("span").css({display:"none"})

      $(this).css({background:"#3fa600"}).find("em").css({
        backgroundPosition:-$(this).index() * 34 + "px -42px"}).end().siblings().css({background:"black"})
    })

    /*---------------------banner(中间轮播图)-----------------------------*/
    var index = 0;
    var timer = setInterval(autoPlay, 2500);
    //轮播函数
    function autoPlay () {
      index++;
      if (index == $(".btn_list a").size()) {
        index = 0;
      }
      $(".btn_list a").eq(index).addClass("active").siblings().removeClass("active");
      $(".img_list li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
    }
    //鼠标移入图片盒子上  停止定时器
    $(".img_list img").mouseover(function () {
      clearInterval(timer);
      index = $(this).index() - 1;
      autoPlay();
    })
    //鼠标移入图片盒子上  开启定时器
    $(".img_list img").mouseout(function () {
      clearInterval(timer);
      timer = setInterval(autoPlay, 2500);
    })

    /*------------------banner_left(获取菜单数据)-------------------------------*/
    $.ajax({
      type: "get",
      //根据index找文件
      url: "src/json/index.json",
      success: function (res) {
       // console.log(res);
        var str = "";
        var html = "";
        for (var i in res) {
          //  <li class="kinds"><a href="#">肉禽水产</a></li>
          str += `<li class="kinds"><a href="#">${i}</a></li>`;
          var html1 = "";
          for (var j in res[i]) {
            var html2 = "";
            for (var m in res[i][j]) {
              html2 += `<li><a href="#">${res[i][j][m]}</a></li>`
            }
            // 第二层 ： <li><span>精品水果<i>></i></span><ul class="nav_detail">'+html2+'</ul></li>
            html1 += `<li><span>${j}<i>></i></span><ul class="nav_detail">${html2}</ul></li>`
          }
          //第一层 ：<ul class="nav_second_list">整个卡片</ul>
          html += `<ul class="nav_second_list">${html1}</ul>`;
        }
        $(".nav_first").html(str);
        $(".nav_second").html(html);
      }
    })
    /*---------------banner_left(鼠标划入一级菜单,显示二级菜单)-------------------*/

      $(".nav_first").on("mouseover", "li", function () {
        $(".nav_second").css({"display": "block"})
        $(".nav_second>ul").eq($(this).index()).css("display", "block").siblings().css("display", "none")
      })
      $(".nav_first").mouseout(function () {
        $(".nav_second").css("display", "none")
      })
      $(".nav_second").mouseover(function () {
        $(".nav_second").css("display", "block")
      })
      $(".nav_second").mouseout(function () {
        $(".nav_second").css("display", "none")
      })
      /*---------------banner_right(选项卡)-------------------*/
      $(".nav_r_title ").on("mouseover", "li", function () {
        $(this).addClass("nav_r_current").siblings().removeClass("nav_r_current");
        $(".nav_r_wrap").find(".nav_r_cont").eq($(this).index()).css("display", "block").siblings().css("display", "none");
      })
    });
    /*---------------------hot_list(轮播图)----------------------------------*/
      $("#product-list-first").clone().appendTo($(".product_box"));
      var index = 0;
      $("#btn-right").on("click",function(){
        index++;
        $(".product-list").stop().animate({"left":-$(".product-list").width()*index},2000);

        if(index >= $(".product-list").length){
          index=1;
          $(".product-list").left=0;
        }
      })
    /*------------------floors(楼梯)---------------------------------------*/
    $.ajax({
      type:"get",
      //根据index找文件
      url:"src/json/floors.json",
      success:function(res){
        var nav=" ";
        var goods=" ";
        var goodsCon=" ";
        var floor=" ";
        for(var i in res){
          // res[i]  拿到 floorlist 对象
          for(var j in res[i]){
            // res[i][j] 拿到每一个楼层对象  1F / 2F,再分别拿到左右两部分.
            // 左侧导航
            var navList = res[i][j].navList;
            for(var k=0;k<navList.length;k++){
              var navCon = navList[k];
            }
            nav = `<div class="floor_left"><h3><i></i>${navCon.title}</h3><div class="floor_l_con"><span>${navCon.floorNum}</span>
<ul class="floor_l_top">
<li><i style="background-image: url(${navCon.icon[0]});"></i>
<a href="">${navCon.leftnav[0]}</a></li><li><i style="background-image: url(${navCon.icon[1]});"></i><a href="">${navCon.leftnav[1]}</a></li><li><i style="background-image: url(${navCon.icon[2]});"></i><a href="">${navCon.leftnav[2]}</a></li><li><i style="background-image: url(${navCon.icon[3]});"></i><a href="">${navCon.leftnav[3]}</a></li><li><i style="background-image: url(${navCon.icon[4]});"></i><a href="">${navCon.leftnav[4]}</a></li><li><i style="background-image: url(${navCon.icon[5]});"></i><a href="">${navCon.leftnav[5]}</a></li></ul><div class="floor_l_bottom"><a href=""><img src="${navCon.leftSrc}"/></a></div></div></div>`
            //右侧商品列表
            var goodsList = res[i][j].goodsList;
            for(var m =0;m <goodsList.length;m++){
              var good = goodsList[m];
              goodsCon +=`<li><dl><dt><a href=""><img src="${good.src}"/></a></dt><dd class="floor_name"><a href="">${good.txt}</a></dd><dd class="floor_price"><span>${good.price}</span></dd></dl></li>`;
            }
            goods = `<div class="floor_right"><ul class="floor_r_title"><li class="floor_tltile_cur">精选推荐</li><li>热卖推荐</li></ul><div id="floor_r_con"><ul class="floor_r_list">${goodsCon}</ul></div></div>`;
            //楼层
            floor =''+nav+goods;
          }
        };
        $(".floor_box").html(floor);
      }
    })
    /*------------------------复制楼层---------------------------*/
    /*for(var i = 1 ; i <= 9 ; i++){
      $(".floor_box:first").clone().appendTo($(".floors_box"));
    }*/
    /*------------------------楼层效果---------------------------*/
    /*1、点击左侧楼层号，对应的楼层字体红色
     改变 对应的楼层位置     （滚动条滚走的距离）
     2、点击top按钮，回到顶部

     3、触发滚动条，根据滚动条滚走的距离  设置楼层号的样式
     关键判断：  当前哪一个楼层在可视区的高度超出了 h/2   */
    var flag = true;//开关边框控制滚动条是否被触发  假设值为true时  可以触发滚动条
    // 1.  点击层楼导航
    $(".floor_nav_box li:not(:last)").click(function(){
      flag = false;
      //当前点击的span的文字红色  其余默认颜色
      $(this).find("a")
      .addClass("f_active")
      .end()
      .siblings()
      .find("a")
      .removeClass("f_active");
      //根据当前操作的楼层号的下标  找到对应楼层距离文档顶部的 距离
      var topHeight = $(".floor_box").eq( $(this).index() ).offset().top;

      //设置滚动条滚走的距离 为  topHeight
      $("body,html").stop().animate({"scrollTop":topHeight},1000,function(){
        flag = true; //点击事件动画完成后，将开关变量改变成true，让scroll滚动条事件可以继续执行
      })
    })

    //2. 点击楼层号的最后一个按钮Top   滚动条回到顶部,并清空所有按钮的样式
    $(".top").click(function(){
      flag = false;
      $("body,html").animate({"scrollTop":0},1000,function(){
        flag = true;
      });
      $(".floor_nav_box li:not(:last)").find("a").removeClass("f_active");
    })

    //3.操作滚动条
    $(window).scroll(function(){
      if(flag){
        //获取滚动条滚走距离
        var sTop = $(document).scrollTop();
        var h = $("#floors_box").offset().top;
        //console.log(sTop);
        if(sTop>=h && sTop< 7000){
          // alert($(".floor_nav"));
          $(".floor_nav").css({
            display:"block"
          });
        }else{

          $(".floor_nav").hide();
        }
        var $floor = $(".floor_box").filter(function(){
          return Math.abs( $(this).offset().top - sTop ) < $(this).height()/2;
        })
        //根据楼层的索引  找到对应的楼层号   设置样式
        $(".floor_nav_box li").eq( $floor.index() )
        .find("a")
        .addClass("f_active")
        .end()
        .siblings()
        .find("a")
        .removeClass("f_active");

      }
    })
  /*-------------------------footer_nav----------------------------------*/
  $.ajax({
    type:"get",
    url:"src/json/footer.json",
    success:function(res){
      var html="";
        for(var i = 0 ; i < res.list.length ; i++){
          var child = res.list[i];
          for(var j = 0 ; j <res.list.lenght ; j++){
              html+='<li><a href="#">'+res[i].list[j]+
            '</a></li>'
            console.log(html)
          }
        //console.log(child);
        html += '<li class="section"><h3 class="footer_title"><a href="">'+child.title+
          '</a></h3><div class="footer_pic"><a href=""><img src="'+child.src+
          '"/></a></div><ul class="footer_nav_list"><li><a href="">'+child.list[0]+
          '</a></li><li><a href="">'+child.list[1]+
          '</a></li><li><a href="">'+child.list[2]+
          '</a></li><li><a href="">'+child.list[3]+
          '</a></li><li><a href="">'+child.list[4]+
          '</a></li><li><a href="">'+child.list[5]+
          '</a></li><li><a href="">'+child.list[6]+
          '</a></li><li><a href="">'+child.list[7]+
          '</a></li><li><a href="">'+child.list[8]+
          '</a></li><li><a href="">'+child.list[9]+
          '</a></li></ul></li>'
      }
      /*-----------------------bug未解决---------------------*/
      if(!$(".footer_nav_list>li>a") == ""){
        $(".nav_con").html(html);
       }
      $(".floor_r_list img").hover(function(){
        $(this).stop().animate({left:"10px"},200);
      },function(){
        $(this).stop().animate({left:"0px"},200);
      })
    }
  })
  })
})
